<template>
    <p1>name:{{ person.name }}</p1>
    <br>
    <p1>age:{{ person.age }}</p1>
    <br>
    <button @click="changeName">修改名字</button>
    <br>
    <button @click="changeAge">修改年龄</button>
    <br>
    <button @click="changePerson">换新人</button>
</template>

<script lang="ts">
export default {
    name: 'Hello'
}
</script>

<!--setup语法糖-->
<script setup lang="ts">
import { ref, reactive,toRefs, toRef,computed,watch } from 'vue'

let person = ref({ name: 'zs', age: 18 })


function changeName() { 
    person.value.name += '~'
}
function changeAge() { 
    person.value.age +=1
}
function changePerson() { 
    person.value = {name:'ls',age:20}
}
/*
 * 监视的对象是地址值 
    第一个参数是 被监视的数据
    第二个参数是 监视回调
    第三个参数是 配置对象(deep、immediate、等...)
 */
watch(person, (newValue,oldValue) => { 
    console.log(person.value,newValue,oldValue);
}, {deep:true})



</script>